<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
      <div v-if="statusName" class="status-wrapper">
        <ul>
          <li
            v-for="(item, index) of status[statusName]"
            :key="index"
            :class="{active: activeIndex === index}"
            @click="handelClick(index, item.status)"
          >{{ item.name }}</li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    statusName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      status: {
        delivery: [
          {
            name: '待收货',
            status: 3
          },
          {
            name: '交易完成',
            status: 1
          }
        ],
        payment: [
          {
            name: '待发货',
            status: 2
          },
          {
            name: '待收货',
            status: 3
          },
          {
            name: '交易完成',
            status: 1
          }
        ],
        receipt: [
          {
            name: '交易完成',
            status: 1
          }
        ]
      },
      activeIndex: -1,
      orderStatus: ''
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    handelClick(index, order_status) {
      this.activeIndex = index
      this.orderStatus = order_status
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    confirm() {
      this.dialogVisible = false
      this.$emit('confirm', this.orderStatus)
    }
  }
}
</script>
<style lang="scss" scoped>
.status-wrapper {
  ul {
    display: flex;
    align-items: center;
    li {
      margin-right: 15px;
      padding: 8px 16px;
      border: 1px solid #ccc;
      list-style: none;
      border-radius: 5px;
      cursor: pointer;
      &.active {
        border: 1px solid #409eff;
        background: url("./../../../assets/selected.png") no-repeat;
        background-position: right bottom;
        background-size: 30% 60%;
      }
    }
  }
}
</style>
